<template>
  <van-sku
    v-model="show"
    :sku="sku"
    :goods="goods"
    :goods-id="goodsId"
    :quota="quota"
    :quota-used="quotaUsed"
    :hide-stock="sku.hide_stock"
    @buy-clicked="onBuyClicked"
    @add-cart="onAddCartClicked"
    ref="checkbox"
  />
</template>

<script>
import Vue from "vue";
import { Sku } from "vant";
import { getGoodsDetail, getGoodsSize } from "../api/details";

Vue.use(Sku);
export default {
  mounted() {
    console.log(this.$refs.checkbox.getSkuData())
    
  },
  async created() {
    let res1 = await getGoodsSize(this.id1, this.id2);
    this.sizeInfo = res1.data.infos;
    console.log(res1.data.infos.size);
    this.a = res1.data.infos.size;
    this.a.forEach((item, val) => {
      this.size.push({
        id: item.sizeId,
        name: item.sizeId,
        imgUrl: "",
        previewImgUrl:this.img,
        color:item.color
      });
      this.list.push({
            id: 2259, 
            s1: item.sizeId,
            price: this.price*100, 
            stock_num: parseInt(item.qty), 
      })
    });
    console.log(this.sku.tree[0].v);
    this.sku.tree[0].v = this.size;
    this.sku.list = this.list;
  },
  props:['price','img','name'],
  data() {
    return {
      goods: "qweqwe",
      goodsId: 1,
      quota: 5,
      quotaUsed: 0,
      show: true,
      id1: 20872087,
      id2: 99000004487,
      size: [],
      list:[],
      a:{},
      buy:null,
      sku: {
        // 所有sku规格类目与其值的从属关系，比如商品有颜色和尺码两大类规格，颜色下面又有红色和蓝色两个规格值。
        // 可以理解为一个商品可以有多个规格类目，一个规格类目下可以有多个规格值。
        tree: [
          {
            k: "尺码", // skuKeyName：规格类目名称
            k_s: "s1", // skuKeyStr：sku 组合列表（下方 list）中当前类目对应的 key 值，value 值会是从属于当前类目的一个规格值 id
            v: [
              
            ],
            largeImageMode: false, //  是否展示大图模式
          },
        ],
        // 所有 sku 的组合列表，比如红色、M 码为一个 sku 组合，红色、S 码为另一个组合
        list: [
          
        ],
        price: this.price, // 默认价格（单位元）
        stock_num: 227, // 商品总库存
        collection_id: 2261, // 无规格商品 skuId 取 collection_id，否则取所选 sku 组合对应的 id
        none_sku: false, // 是否无规格商品
        
        hide_stock: false, // 是否隐藏剩余库存
      },
      goods: {
        // 默认商品 sku 缩略图
        picture: this.img,
      },
      
    };
  },
  methods: {
    onBuyClicked() {
      let x=this.$refs.checkbox.getSkuData().selectedSkuComb
      x.properties.push(this.a[0].brand,this.name,this.a[0].color,this.$refs.checkbox.selectedSku.s1,this.$refs.checkbox.price,this.$refs.checkbox.selectedNum)
      console.log(x) 
      this.buy=x
    },
    onAddCartClicked() {  
      let x=this.$refs.checkbox.getSkuData().selectedSkuComb
      x.properties.push(this.a[0].brand,this.name,this.a[0].color,this.$refs.checkbox.selectedSku.s1,this.$refs.checkbox.price,this.$refs.checkbox.selectedNum)
      console.log(x) 
      this.buy=x
      this.show=false
    },
  },
};
</script>

<style lang="scss" scoped>
.van-sku-actions .van-button {
  border-radius: 1px !important;
}
.van-sku-actions .van-button:first-of-type {
  border-top-left-radius: 1px !important;
  border-bottom-left-radius: 1px !important;
  background-color: #fff !important;
}
</style>